<script setup>
import { getProProductionV2 } from "@/api/visual/index";
import { formatHeaderData, formatMoney } from "@/utils/globalMethod";

const key = ref(1);
const config = ref({
  header: ["工单单号", "产品编号", "产品名称", "规格型号", "数量", "进度"],
  data: [],
  align: ["center", "center", "center", "center", "center", "center"],
  // columnWidth: [100, 100, 100, 110, 40, 60]
});

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++;
    }, 100);
  });
};

const loadData = async () => {
  const { data } = await getProProductionV2();
  config.value.data = data.map((item) => {
    let zt = "";
    if (item.wgzt === "已完工") zt = formatHeaderData("已完工", "green");
    if (item.wgzt === "未完工") zt = formatHeaderData("未完工", "red");
    return [
      item.BillNO,
      item.ProdID,
      item.ProdName,
      item.ProdSize,
      (item.Quantity = formatMoney(null, item.Quantity)),
      `<div style="width:100%;height:100%; display: flex; justify-content: center; align-items: center; ">
        <div style="width: 100%;  height: 6px; margin:2px 0;  border-radius: 6px;border: 1px solid #eee;background: linear-gradient(90deg, #0f0, #0ff ${
          item.jd * 100
        }%, transparent 0);"></div>
        </div> `,
    ];
  });
};

onMounted(loadData);
onMounted(() => {
  window.addEventListener("resize", keyResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", keyResize);
});
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box7 :key="key">
      <ps-scroll-data :option="config" border></ps-scroll-data>
    </dv-border-box7>
    <!-- <div class="board-title">今日机台工作小时</div>

    <dv-scroll-ranking-board :config="config" /> -->
  </div>
</template>

<style scoped lang="scss"></style>
